<template>
    <div>
        <Pager :total="totalRef"
        :current="currentRef"
        @page-change="handlePageChange"
        :limit="limit"

        :total-obj="totalObjInTest"
        />
    </div>
    <hr />
    <button @click="changeLimit">change limit</button>
    <p> totalObjInTest : {{ totalObjInTest.total }}</p>
</template>
<script setup lang='ts'>
    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
import { ref } from 'vue';
import Pager from './index.vue';
    
    const totalRef=ref(300);
    const currentRef=ref(1);    
    let limit=50;

    const handlePageChange=(newPage:number)=>{
        // console.log('change to :',newPage);
        currentRef.value=newPage;
    }
    
    const totalObjInTest=ref({
        total:1500,
        deepObj:{
            age:11
        }
    })

    // console.log('totalObjInTest',totalObjInTest);
    // console.log('totalObjInTest.value.total',totalObjInTest.value.total);
    // console.log('totalObjInTest.value.deepObj',totalObjInTest.value.deepObj);
    

    const changeLimit=()=>{
        console.log('limit :',limit);
        
        limit=20;
    }
</script>
<style lang='less' scoped>
    
</style>